<script lang="ts" setup>
import { computed, ref } from 'vue'
import { USER_ORDER_STATUS } from '@/utils/enums'
import { PageSkip, Toast, SwitchingTime, MyShowModal } from '@/utils/tools'

const query = defineProps<{
  orderInfo: any
}>()
const userOrderOtatus = computed(() => query.orderInfo?.orderStatus as 0 | 1 | 2 | 3) // 用户订单展示状态
const operationalOnlineStatus = computed(() => query.orderInfo?.operationalOnlineStatus) // 客服是否在线
const awaitNum = computed<number>(() => query.orderInfo?.awaitNum) // 等待数量
// const replacementState = computed(() => query.orderInfo?.replacementState) // 是否点击代取
// const scannedStatus = computed(() => query.orderInfo?.scannedStatus) // 是否扫描过二维码

// /**总共多少份餐品 */
// const sumNum = computed<number>(() => {
//   return query.orderInfo?.orderDetailList?.reduce((prev: number, next: any) => {
//     return prev + next.count
//   }, 0)
// })
/** 动态修改文字颜色 */
const changeColor = computed(() => {
  return awaitNum.value > 10 ? '#FFBD2C' : '#FFBD2C'
})
/** 获取到预计做好的时间 */
const getEstimatedTime = () => {
  const currentTime = new Date().getTime()
  const estimatedTime = (awaitNum.value + 1) * 2 * 60000 + currentTime
  return SwitchingTime(estimatedTime, 'HM')
}
/**去订单详情 */
const goOrderDetails = () => {
  PageSkip(`/pagesGoods/goodsDetails/goodsDetails?orderId=${query.orderInfo.order.orderId}`)
}

import { postReplaceApi } from '@/services/goods'

/**点击代取触发 */
const replace = () => {
  MyShowModal('您确定要代取吗？').then(async (success: UniApp.ShowModalRes) => {
    if (success.confirm) {
      uni.showLoading({
        title: '加载中···',
        mask: true,
      })
      try {
        const res = await postReplaceApi({ orderId: query.orderInfo.order.orderId })
        uni.hideLoading()
        if (res.code === 200) {
          PageSkip(`/pagesGoods/goodsDetails/goodsDetails?orderId=${query.orderInfo.order.orderId}`)
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        uni.hideLoading()
      }
    }
  })
}

const tipsShow = ref(false)
/**提示文字变化 */
const changeTipsShow = () => {
  tipsShow.value = !tipsShow.value
}
defineExpose({
  tipsShow,
})
</script>
<template>
  <view class="OrderStatus">
    <view class="_top_box">
      <view class="orderStatusTitle">
        <img
          class="_img"
          src=""
          alt=""
        />
        <view class="orderStatusText">
          <view class="orderStatusText_par">{{ USER_ORDER_STATUS[userOrderOtatus] }}</view>
        </view>
      </view>
      <view v-if="userOrderOtatus === 1" class="selectText">选择您的取餐方式</view>
      <view v-else-if="userOrderOtatus === 2" class="selectText fs24">
        预计等待<text :style="{ color: changeColor }" class="fs24"
          >&nbsp;{{ awaitNum * 2 + 2 }}&nbsp;</text
        >分钟
      </view>
      <img
        v-else-if="userOrderOtatus === 3"
        class="Please_dine_img"
        src=""
        alt=""
      />
    </view>
    <view v-if="userOrderOtatus === 1" class="_bottom_box">
      <view class="_tips_box">
        <view class="iconfont icon_alert"></view>
        <view class="_tips_text">
          {{ operationalOnlineStatus ? '选择客服代取，' : '暂无客服在线，' }}
          <view> {{ operationalOnlineStatus ? '减少排队等待时间' : '请扫码取餐' }}</view>
        </view>
      </view>
      <view class="pick_up_box">
        <view
          v-if="operationalOnlineStatus"
          @tap.stop="replace"
          class="online fs24"
          hover-class="view-hover"
          >客服代取</view
        >
        <view v-else @tap.stop="changeTipsShow" class="not_online fs24"
          >客服离线<text class="iconfont icon_a-zhuyi2 fs24"></text>
          <BjsTips :show="tipsShow" :top="90">
            <template type="default">
              <view style="font-size: 11px; line-height: 1.5em; color: #000000e5; background: #fff"
                >我们的客服人员预计将于
                <text style="color: #ffbe2c">上午10:30</text>
                上线，<text style="color: #ffbe2c">中午12:30</text>结束服务。感谢您的耐心等待</view
              >
            </template>
          </BjsTips>
        </view>
        <view @tap.stop="goOrderDetails" class="goCode fs24" hover-class="view-hover">去扫码</view>
      </view>
    </view>
    <view v-else-if="userOrderOtatus === 2">
      <view class="queuing fs32" v-if="awaitNum > 0"
        >前方<text :style="{ color: changeColor }" class="fs32">&nbsp;{{ awaitNum }}&nbsp;</text
        >份制作中，预计<text :style="{ color: changeColor }" class="fs32"
          >&nbsp;{{ getEstimatedTime() }}&nbsp;</text
        >取餐</view
      >
      <view v-else class="production fs32">
        正在制作您的餐品，预计<text :style="{ color: changeColor }" class="fs32"
          >&nbsp;{{ getEstimatedTime() }}&nbsp;</text
        >取餐
      </view>
    </view>
    <view v-else-if="userOrderOtatus === 3" class="Please_dine fs32">订单已完成，请取餐</view>
    <view class="_left"></view>
    <view class="_right"></view>
  </view>
</template>
<style lang="scss" scoped>
.OrderStatus {
  width: 702rpx;
  height: 202rpx;
  margin-bottom: 28rpx;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #FFBD2C -30.2%, #fff 40.13%);
  box-shadow: 0px 8rpx 0px 0px rgba(255, 189, 44, 1);
  position: relative;
  padding: 28rpx 32rpx 4rpx 40rpx;
  ._bottom_box {
    position: relative;
  }
  .queuing,
  .production,
  .Please_dine {
    width: 630rpx;
    text-align: center;
  }
  ._top_box,
  ._bottom_box {
    width: 630rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .orderStatusTitle {
      width: 168rpx;
      height: 74rpx;
      display: flex;
      align-items: center;
      ._img {
        width: 52rpx;
        height: 44rpx;
        margin-right: 20rpx;
      }
      .orderStatusText {
        font-size: 24rpx;
        color: #666;
        .orderStatusText_par {
          font-weight: 600;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    .selectText {
      min-width: 30rpx;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-size: 24rpx;
      color: #333;
      margin-right: 16rpx;
    }
    ._tips_box {
      width: 208rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      .icon_alert {
        margin-right: 16rpx;
        color: #b8b8b8;
      }
      ._tips_text {
        font-size: 20rpx;
        color: #666;
      }
    }
    .Please_dine_img {
      position: absolute;
      right: 72rpx;
      top: 50rpx;
      width: 90rpx;
      height: 80rpx;
    }
    .pick_up_box {
      display: flex;
      .online,
      .not_online,
      .goCode {
        border-radius: 28rpx;
        min-width: 120rpx;
        height: 56rpx;
        padding: 0 24rpx;
        text-align: center;
        color: #fff;
        display: flex;
        align-items: center;
      }
      .online {
        background: #FFBD2C;
      }
      .not_online {
        position: relative;
        background: rgba(0, 0, 0, 0.18);
        .icon_a-zhuyi2 {
          margin-left: 8rpx;
          color: #fff;
        }
      }
      .goCode {
        margin-left: 20rpx;
        border: 1px solid #FFBD2C;
        color: #FFBD2C;
      }
    }
  }

  ._left,
  ._right {
    position: absolute;
    top: 20rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #FFBD2C;
  }
  ._left {
    left: 28rpx;
  }
  ._right {
    right: 28rpx;
  }
}
</style>
